{% schema %}
{
  "name": "visual-parameter",
  "settings": [
    {
      "type": "text",
      "id": "title",
      "label": "Title",
      "default": "Micro OLED"
    },
    {
      "type": "text",
      "id": "desc",
      "label": "Desc",
      "default": "The Micro OLED display can display rich and brilliant colors. whether watching movies, browsing photos or playing games, every frame is amazing!"
    },
    {
      "type": "url",
      "id": "image",
      "label": "Banner Image",
    },
    {
      "type": "url",
      "id": "cp_image",
      "label": "Banner Image CP"
    },
  ],
  "blocks": [
    {
      "type": "card",
      "name": "Card",
      "settings": [
        {
          "type": "text",
          "id": "title",
          "label": "Card Title",
          "default": "TÜV Rheinland Certified"
        },
        {
          "type": "url",
          "id": "image",
          "label": "Card Image",
        },
        {
          "type": "url",
          "id": "image_pc",
          "label": "Card Image PC (>1280px)",
        },
        {
          "type": "radio",
          "id": "radio",
          "label": "Choose assets type",
          "options": [
            {
              "value": "video",
              "label": "video"
            },
            {
              "value": "image",
              "label": "image"
            }
          ],
        },
      ]
    },
  ],
  "presets": [
    {
      "name": "Default",
      "category": "Custom"
    }
  ]
}
{% endschema %}

{%- style -%}
.b-{{ section.id }} {
  padding-top: 50px;
  padding-bottom: 30px;
}
.item-label-{{ section.id }} {
  font-family: HarmonyOS Sans;
  font-size: 18px;
  font-weight: 500;
  line-height: normal;
  letter-spacing: 0em;
  color: #A1A1A6;
  margin-bottom: 4px;
}

.item-value-{{ section.id }} {
  font-family: HarmonyOS Sans;
  font-size: 48px;
  font-weight: bold;
  line-height: normal;
  letter-spacing: 0em;
  color: #000000;
}

.card-{{ section.id }} {
  position: relative;
  padding-bottom: 65.74923%;
  border-radius: 20px;
  background: #F7F7F7;
  margin: 0 auto 20px auto;
  overflow: hidden;
}
.card-title-{{ section.id }} {
  font-family: HarmonyOS Sans;
  font-size: 18px;
  font-weight: bold;
  line-height: 150%;
  letter-spacing: -0.56px;
  color: #FFFFFF;
  margin-top: 20px;
}
.card-{{ section.id }} img, .card-{{ section.id }} video {
    position: absolute;
    top: 0;
    left: 50%;
    height: 100%;
    z-index: -1;
    transform: translateX(-50%);
}

.left-title-{{ section.id }} {
  font-family: HarmonyOS Sans;
  font-size: 40px;
  font-weight: bold;
  line-height: normal;
  letter-spacing: 0em;
  color: #000000;
}
.right-desc-{{ section.id }} {
  font-family: HarmonyOS Sans;
  font-size: 14px;
  font-weight: normal;
  line-height: 120%;
  display: flex;
  align-items: center;
  letter-spacing: -0.56px;
  font-variation-settings: "opsz" auto;
  color: #86868B;
}

.station_img-{{ section.id }} {
  max-width: 100%;
}

  .section-1-{{ section.id }} {
    margin-bottom: 20px;
  }
{%- endstyle -%}

<div class="bg-white position-relative">
<div class="b-{{ section.id }} overflow-hidden">
  <div class="d-md-none" style="margin-bottom: 30px">
    <img class="station_img-{{ section.id }} d-block mx-auto" src="{{ section.settings.image }}">
  </div>
  <div class="d-none d-md-block container" style="margin-bottom: 30px">
    <img class="station_img-{{ section.id }} d-block mx-auto" src="{{ section.settings.cp_image }}">
  </div>
  <div class="container">
    <div class="row position-relative section-1-{{ section.id }}">
      <div class="col col-12 col-xl-7 box-{{ section.id }} d-xl-flex">
        <div class="row gx-8 gx-xl-0 gy-0 justify-content-between justify-content-xl-start mb-6 mb-xl-0 p-xl-4">
          <div class="col col-4 col-xl-5 left-title-{{ section.id }} anim">{{ section.settings.title }}</div>
          <div class="col col-8 col-xl-5 right-desc-{{ section.id }} anim">
            {{ section.settings.desc }}
          </div>
        </div>
      </div>
      <div class="col col-12 col-xl-5 box-{{ section.id }} p-xl-4">
        <div class="item-{{ section.id }} anim mb-6 mb-xl-0 animated d-xl-none">
          <div class="item-label-{{ section.id }}">Resolution</div>
          <div class="item-value-{{ section.id }}">FHD 1080P</div>
        </div>
        <div class="item-{{ section.id }} anim mb-6 mb-xl-0 animated d-xl-block d-none">
          <div class="item-label-{{ section.id }}">Refresh Rate</div>
          <div class="item-value-{{ section.id }}">120Hz</div>
          <div class="item-label-{{ section.id }}">Provides smoother images and visual effects.</div>
        </div>
      </div>
      
      <div class="col col-12 col-xl-3 box-{{ section.id }} p-xl-4">
        <div class="item-{{ section.id }} anim mb-6 mb-xl-0 animated d-xl-none">
          <div class="item-label-{{ section.id }}">Refresh Rate</div>
          <div class="item-value-{{ section.id }}">120Hz</div>
        </div>
        <div class="item-{{ section.id }} anim mb-6 mb-xl-0 animated d-xl-block d-none">
          <div class="item-label-{{ section.id }}">Screen Experience</div>
          <div class="item-value-{{ section.id }}">215"</div>
        </div>
      </div>
      
      <div class="col col-12 col-xl-4 box-{{ section.id }} p-xl-4">
        <div class="item-{{ section.id }} anim mb-6 mb-xl-0 animated d-xl-none">
          <div class="item-label-{{ section.id }}">Screen Experience</div>
          <div class="item-value-{{ section.id }}">215"</div>
        </div>
         <div class="item-{{ section.id }} anim mb-6 mb-xl-0 animated d-xl-block d-none">
          <div class="item-label-{{ section.id }}">Resolution</div>
          <div class="item-value-{{ section.id }}">FHD 1080P</div>
        </div>
      </div>
      
      <div class="col col-12 col-xl-5 box-{{ section.id }} p-xl-4">
        <div class="item-{{ section.id }} anim mb-6 mb-xl-0 animated">
          <div class="item-label-{{ section.id }}">Field of View</div>
          <div class="item-value-{{ section.id }}">50°</div>
        </div>
      </div>

    </div>
    <div class="row gx-4 section-2-{{ section.id }}">
      {% for block in section.blocks %}
      {% if block.type == 'card' %}
      <div class="col col-12 col-sm-6">
        <div class="card-{{ section.id }} anim">
          <div class="px-4 px-xl-6 position-absolute top-0 start-0 end-0 bottom-0">
            <div class="card-title-{{ section.id }}">{{ block.settings.title }}</div>
            {% if block.settings.radio == 'image' %}
            <div class="d-xl-none position-absolute top-0 start-0 end-0 bottom-0" style="background-image: url('{{ block.settings.image }}');
                  background-size: cover;
                  background-position: center;z-index: -1"></div>
             <div class="d-xl-block d-none position-absolute top-0 start-0 end-0 bottom-0" style="background-image: url('{{ block.settings.image_pc }}');
                  background-size: cover;
                  background-position: center;z-index: -1"></div>
              
            {% endif %}
            {% if block.settings.radio == 'video' %}
            <video loop autoplay playsinline muted preload="auto">
              <source type="video/mp4" src="{{ block.settings.image }}">
            </video>
            {% endif %}
          </div>
        </div>
      </div>
      {% endif %}
      {% endfor %}
    </div>
  </div>
</div>
</div>
<style>
  @media (min-width: 1280px) {
    .box-{{ section.id }} {
      position: relative;
    }
    .box-{{ section.id }}:nth-child(1):after {
      content: "";
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 1px;
      background: linear-gradient(270deg, #999999 0%, rgba(134, 134, 139, 0) 99%);
    }
    .box-{{ section.id }}:nth-child(1):before {
      content: "";
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      width: 1px;
      height: 100%;
      background:  linear-gradient(180deg, rgba(134, 134, 139, 0) 0%, #999999 53% ) ;
    }
    .box-{{ section.id }}:nth-child(2):after {
      content: "";
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 1px;
      background: linear-gradient(90deg, #999999 0%, rgba(134, 134, 139, 0) 99%);
    }
    .box-{{ section.id }}:nth-child(3):before, .box-{{ section.id }}:nth-child(4):before  {
      content: "";
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      width: 1px;
      height: 100%;
      background: linear-gradient(0deg, rgba(134, 134, 139, 0) 0%, #999999 53% ) ;
    }
    .card-title-{{ section.id }} {
      font-size: 24px;
      margin-top: 32px;
    }
    .section-1-{{section.id}} {
      margin-bottom: 60px!important;
      height: 540px;
    }
    .left-title-{{section.id}} {
      width: 240px;
      font-size: 65px;
      display: flex;
    align-items: center;
      margin-right: 65px;
    }
    .right-desc-{{ section.id }} {
      font-size: 18px;
    }
    .box-{{ section.id }}:nth-child(1) {
      padding-left: 0px!important;
    }

    .box-{{ section.id }}:nth-child(3) {
      padding-left: 24px!important;
    }

    .box-{{ section.id }}{
      padding-left: 100px!important;
        display: flex;
      align-items: center;
    }
    .item-label-{{section.id}} {
      font-size: 20px;
    }
    .item-value-{{section.id}} {
      font-size: 48px;
    }
  }
</style>